<template>
	<view class="order">
		<view v-if="hasLogin">
			<!-- #ifndef MP-WEIXIN -->
				<public-header :title="title" :dark="dark"></public-header>
				<view class="hei_100"></view>
			<!-- #endif -->
			<!-- end -->
			
			<view class="cont">
				<view>
					<view class="tit">分享金剩余（元）</view>
					<view>{{balances.brokerage}}</view>
				</view>				
				<view>
					<view class="tit">已使用（元）</view>
					<view>{{balances.usedBrokerage}}</view>
				</view>			
			</view>
			
			<!-- 列表数据 -->
			<view class="lists" :style="{ height: show ? '1100rpx' : 'auto', overflow: show ? 'hidden' : 'auto' }">
				<!-- <mescroll-body top="100" ref="mescrollRef" @init="mescrollInit" @down="downCallback" :down="downOption"> -->
					<view v-for="(item, index) in goods" :key="index" class="card">
						{{item.consumeDatetime}} {{item.userVo.account}}分享获得分享金 +<text class="text-color">{{item.brokerage}}</text> 元
					</view>
					<view class="nologin" v-if="goods.length==0">
						<image src="/static/images/middle_image@2x.png" mode="widthFix"></image>
						<view>暂无数据</view>
					</view>
				<!-- </mescroll-body> -->
			</view>
			<!-- end -->
		</view>
	</view>
</template>

<script>
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue';
	import PublicHeader from '@/components/PublicHeader.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		mixins: [MescrollMixin],
		components: {
			MescrollBody,
			PublicHeader
		},
		computed: mapState(['hasLogin', 'uerInfo']),
		data() {
			return {
				title:'分享金',
				balances: {
					balances: '',
					brokerage: '',
					usedBrokerage: ''
				},
				dark: true,
				tabCur: 'all',
				show: false,
				tabs: [],
				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				goods: [], //列表数据
				page: 0,
				size: 3,
				orderstatusid: '',
				nolist: false
			};
		},
		onLoad() {
			let _this = this
			_this.$http.get('/personal/center/getbrokerageandbalances/'+this.uerInfo.userId).
			then(function (response) {
					_this.balances = response.data
			}).catch(function (error) {
				console.log(error);
			});
			_this.$http.get('/brokerage/getbrokeragelist/' + this.uerInfo.userId).
			then(function(response) {
				if (response.success) {
					_this.goods = response.data
				}
			}).catch(function(error) {
				console.log(error);
			});
		},
		methods: {
			...mapMutations(['logout']),
			bindLogin() {
				if (this.hasLogin) {
					this.logout();
				} else {
					uni.navigateTo({
						url: '/pages/register/login'
					});
				}
			},
			getTime(time) {
				if (time) {
					var time = new Date(time)
					var y = time.getFullYear()
					var M = time.getMonth() + 1
					var d = time.getDate()
					var h = time.getHours()
					var m = time.getMinutes()
					var s = time.getSeconds()
					return y + '-' + this.addZero(M) + '-' + this.addZero(d) + ' ' + this.addZero(h) + ':' + this.addZero(m) + ':' + this.addZero(s)
				 } else {
					return ''
				 }
			},
			addZero(m) {
			    return m < 10 ? '0' + m : m
			},
			showTab() {
				var _this = this;
				_this.show = !_this.show;
			},
			//下拉刷新的回调
			downCallback() {
				console.log(666)
				var _this = this
				_this.$http
					.get('/brokerage/getbrokeragelist/' + this.uerInfo.userId)
					.then(function(response) {
						console.log('个人信息', response);
						//联网成功的回调,隐藏下拉刷新的状态
						if (response.success) {
							_this.goods = response.data
							_this.mescroll.endSuccess(response.data.length, false);
						}

					})
					.catch(function(error) {
						console.log(error);
						_this.mescroll.endErr();
					});
			},
			//上拉加载的回调
			upCallback(page) {
				var _this = this
				_this.$http
					.get('/brokerage/getbrokeragelist/' + this.uerInfo.userId)
					.then(function(response) {
						//设置列表数据
						_this.goods = response.data
						_this.mescroll.endSuccess(1, false)
					})
					.catch(function(error) {
						console.log(error);
						_this.mescroll.endErr();
					});
			}
		}
	};
</script>

<style scoped lang="scss">
	/* 导航 */
	.header {
		height: 95rpx;
		width: 100%;
		background: #fff;
		line-height: 95rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		font-size: 36rpx;
		text-align: center;
	}

	.header image {
		top: 26rpx;
		width: 38rpx;
	}

	.header .left {
		position: absolute;
		left: 32rpx;
	}

	.header .right {
		position: absolute;
		right: 32rpx;
	}

	/* 列表tab */
	.tab {
		border-top: 1rpx solid #dfdfdf;
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 100;
		top: 92rpx;
		left: 0;
	}

	.tab .mask {
		box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
		background-color: #fff;
	}

	.tab .clearfix {
		height: 97rpx;
		line-height: 97rpx;
		font-size: 26rpx;
		color: #666;
		text-align: left;
		border-bottom: 1rpx solid #dfdfdf;
		background-color: #fff;
	}

	.tab .clearfix:last-child {
		border: 0 none;
	}

	.tab .clearfix .fr {
		width: 14rpx;
		margin-top: 36rpx;
	}

	.tab .cur {
		color: $uni-color1;
	}

	/* 未登录状态 */
	.nologin {
		width: 100%;
	}

	.nologin image {
		width: 500rpx;
		display: block;
		margin: 0 auto;
		margin-top: 178rpx;
	}

	.nologin view {
		font-size: 28rpx;
		color: #333;
		text-align: center;
		margin-top: 25rpx;
	}

	.nologin navigator {
		width: 412rpx;
		height: 90rpx;
		background-color: $uni-color1;
		line-height: 90rpx;
		color: #fff;
		font-size: 36rpx;
		text-align: center;
		border-radius: 45rpx;
		margin: 0 auto;
		margin-top: 100rpx;
	}
	.card{
		margin-left: 4.26%;
		width: 91.48%;
		// min-height: 78rpx;
		padding: 16rpx 0;
		border-bottom: 1rpx solid #DFDFDF;
		font-size:24rpx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:#666666;
		// line-height:78rpx;
		overflow: hidden;
	}
	.text-color{
		color: $uni-color1;
	}
	.cont {
		display: flex;
		height: 100rpx;
		color: #333333;
		font-size: 36rpx;
		line-height: 50rpx;
		text-align: left;
		padding-top: 38rpx;
		padding-bottom: 30rpx;
		background-color: $uni-color1;
	}
	.cont > view{
		padding: 0 0 0 30rpx;
		width: 50%;
	}
	.cont > view:first-child{
		border-right: 1rpx solid rgba(51, 51, 51, 0.3);
	}
	.cont > view .tit {
		font-size: 24rpx;
		line-height: 33rpx;
		margin-bottom: 10rpx;
	}
</style>
